<template>
	<div class="ext_body" id="ext__body">
		<div class="ext_unit" :id="i" v-for="i in arr" :key="i">{{ i }}</div>
	</div>
</template>

<script setup>
import { mountComponent, endsTimeAnimation, unitElsAddEvent } from '../../globalJS.js';
import { reactive, onMounted } from 'vue';
let hostHtml;
// import music from '@/aaaonlyForTest/testPage.vue'
let ExtendApp = reactive({ newApp: '', oldApp: '' });
let arr = ['#6654', '#6656', '#6657'];
let handleArr = { '#6654': 'music/music.vue', '#6656': 'userPage/search.vue', '#6657': '' };
onMounted(() => {
	unitElsAddEvent('ext_unit', 'click', a);
});
function a(e) {
	let extbodyEl = document.getElementById('ext__body');
	hostHtml = extbodyEl.innerHTML;

	mountComponent('#ext__body', handleArr[e.target.id]).then(result => {
		let shadow = document.getElementById('window__shade');
		shadow.style.display = 'block';
		shadow.addEventListener('click', () => {
			ExtendApp.newApp.unmount();
			extbodyEl.innerHTML = hostHtml;
			let reloadHostIDEl = document.getElementById(e.target.id);
			unitElsAddEvent('ext_unit', 'click', a);
			endsTimeAnimation(reloadHostIDEl, 'unit_fat');
			shadow.style.display = 'none';
		});
		ExtendApp.newApp = result;
		//console.log(ExtendApp.newApp);
	});
}
</script>

<style scoped lang="scss">
.ext_body {
	margin: auto;
	width: 60%;
	
	background-color: rgba($color: #47ba50, $alpha: .6);

	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.ext_unit {
	margin: 20px 0;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 80px;
	height: 40px;
	background-color: #ffa60f;
	cursor: pointer;
}
.unit_fat {
	animation-name: fatThin;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes fatThin {
	0% {
		min-width: 300px;
		font-size: 30px;
	}
	100% {
	}
}
</style>
